<template>
  <div
    :class="[
      quick_func_float_border,
      quick_func_float_default_poi,
      css_wind_light_hover,
      css_cursor_pointer,
      css_circle,
      css_color_active_border_hover,
    ]"
    :id="quick_func_float_border"
    v-drag
  >
    <div
      :class="[
        quick_func_float_icon,
        quick_func_float_static_item,
        css_color_active,
      ]"
      :id="quick_func_float_icon"
    >
      <span :id="quick_func_float_icon_span">i</span>
    </div>
    <div
      :class="[
        quick_func_float_static_item,
        quick_func_float_nosingle,
        css_disnone,
        css_color_hot,
      ]"
      :id="quick_func_float_nosingle"
    >
      <span :id="quick_func_float_nosingle_span">{{ nosingle_title }}</span>
    </div>
    <div
      :class="[quick_func_float_view_container, css_disnone]"
      :id="quick_func_float_view_container"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import './quick_func_float.css';

import {
  nosingle_title,
  quick_func_float_border,
  quick_func_float_default_poi,
  quick_func_float_icon,
  quick_func_float_icon_span,
  quick_func_float_nosingle,
  quick_func_float_nosingle_span,
  quick_func_float_static_item,
  quick_func_float_view_container,
} from './DataDefine/sourceData';
import {
  css_circle,
  css_color_active,
  css_color_active_border_hover,
  css_color_hot,
  css_cursor_pointer,
  css_disnone,
  css_wind_light_hover,
} from '../../Css';
import { init_qff } from './quick_func_float';

onMounted(() => {
  init_qff();
});
</script>
